<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
    <head>
        <title>Time Clock</title>
        <link href="css/bootstrap.css" rel="stylesheet"/>
        <link href="css/bootstrap-theme.css" rel="stylesheet"/>
        <link href="css/time-clock.css" rel="stylesheet" />
        <link href="css/weather.css" rel="stylesheet"/>
        <script type="application/javascript" src="js/main.js"></script>
        <script type="application/javascript" src="js/jquery.js"></script>
        <script type="application/javascript" src="js/bootstrap.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">My Clock</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="javascript:void(0);">设置</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" onclick="minWin()">隐藏</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" onclick="closeWin()">关闭</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="page">
                <div id="clock">
                    <canvas id="canvas" class="canvas">
                        <!-- <span class="hand second"></span>
                        <span class="hand minute"></span>
                        <span class="hand hour"></span> -->
                    </canvas>
                </div>
            </div>
            <div class="cloud small"></div>
            <div class="cloud medium"></div>
            <div class="cloud large"></div>
        </div>


        <script type="application/javascript">
			var canvas, ctx; 
			var clockRadius=90;
			$(function() {
				canvas = $("#canvas");
				ctx = canvas[0].getContext("2d");
				setInterval("drawClock()", 1000);
			});
			
			function drawClock() {
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();
                hours = hours > 12 ? hours - 12 : hours;
                var hour = hours + minutes / 60;
                var minute = minutes + seconds / 60;
                ctx.save();
                
                ctx.translate(78, 75);
                ctx.beginPath();
                ctx.font = "11px Arial";
                ctx.fillStyle = "#333";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                for (var n = 1; n <= 12; n++) {
                    var theta = (n - 3) * 2 * Math.PI / 12;
                    var x = clockRadius * 0.7 * Math.cos(theta);
                    var y = clockRadius * 0.7 * Math.sin(theta);
                    ctx.closePath();
                    ctx.fillText("●", x, y);
                }
                ctx.save();
                
                var theta = (hour - 3) * 2 * Math.PI / 12;
                ctx.rotate(theta);
                ctx.beginPath();
                ctx.moveTo(-15, -5);
                ctx.lineTo(-15, 5);
                ctx.lineTo(clockRadius * 0.4, 1);
                ctx.lineTo(clockRadius * 0.4, -1);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
                ctx.save();
                
                var theta = (minute - 15) * 2 * Math.PI / 60;
                ctx.rotate(theta);
                ctx.beginPath();
                ctx.moveTo(-15, -4);
                ctx.lineTo(-15, 4);
                ctx.lineTo(clockRadius * 0.6, 1);
                ctx.lineTo(clockRadius * 0.6, -1);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
                ctx.save();
                
                var theta = (seconds - 15) * 2 * Math.PI / 60;
                ctx.rotate(theta);
                ctx.beginPath();
                ctx.moveTo(-15, -3);
                ctx.lineTo(-15, 3);
                ctx.lineTo(clockRadius * 0.8, 1);
                ctx.lineTo(clockRadius * 0.8, -1);
                ctx.fillStyle = "#f00";
                ctx.closePath();
                ctx.fill();
                ctx.restore();
                
                ctx.restore();
            }

        </script>

    </body>
</html>